<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/grid.css" />
</head>

<body>
    <h1>Grid网格布局</h1>

    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html">CSS Grid
                网格布局教程</a></li>
    </ul>

    <h2>摘要</h2>
    <p>Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。</p>
    <p>Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。</p>
    
    <h2>效果示例图</h2>
    <a target="_blank" href="./img/grid_demo.png"><img src="./img/grid_demo.png" width="100%" /></a>

    <h2>名词定义</h2>

    <p>采用网格布局的区域，称为"<strong>容器</strong>"（container）。容器内部采用网格定位的子元素，称为"<strong>项目</strong>"（item）。</p>

    <p>容器里面的水平区域称为"<strong>行</strong>"（row），垂直区域称为"<strong>列</strong>"（column）。</p>

    <p>行和列的交叉区域，称为"<strong>单元格</strong>"（cell）。</p>

    <p>划分网格的线，称为"<strong>网格线</strong>"（grid line）。水平网格线划分出行，垂直网格线划分出列。</p>


    <h3>容器属性</h3>

    <ul>
        <li>
            <strong>grid-template-columns</strong> 属性定义每一列的列宽
        </li>

        <li>
            <strong>grid-template-rows</strong> 属性定义每一行的行高
        </li>
        <li>
            <strong>grid-row-gap</strong> 属性设置行与行的间隔（行间距）
        </li>
        <li>
            <strong>grid-column-gap</strong> 属性设置列与列的间隔（列间距）
        </li>
        <li>
            <strong>justify-items</strong> 属性设置单元格内容的水平位置（左中右）
       
            <ul>
                <li>start：对齐单元格的起始边缘</li>
                <li>end：对齐单元格的结束边缘</li>
                <li>center：单元格内部居中</li>
                <li>stretch：拉伸，占满单元格的整个宽度（默认值）</li>
            </ul>
        </li>
        <li>
            <strong>align-items</strong> 属性设置单元格内容的垂直位置（上中下）
        
            <ul>
                <li>start：对齐单元格的起始边缘</li>
                <li>end：对齐单元格的结束边缘</li>
                <li>center：单元格内部居中</li>
                <li>stretch：拉伸，占满单元格的整个宽度（默认值）</li>
            </ul>
        </li>

        <li>
            <strong>justify-content</strong> 属性是整个内容区域在容器里面的水平位置（左中右）
        
            <ul>
                <li>start - 对齐容器的起始边框</li>
                <li>end - 对齐容器的结束边框</li>
                <li>center - 容器内部居中</li>
                <li>stretch - 项目大小没有指定时，拉伸占据整个网格容器</li>
                <li>space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍</li>
                <li>space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔</li>
                <li>space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔</li>
            </ul>
        </li>
        <li>
            <strong>align-content</strong> 属性是整个内容区域的垂直位置（上中下）
        
            <ul>
                <li>start - 对齐容器的起始边框</li>
                <li>end - 对齐容器的结束边框</li>
                <li>center - 容器内部居中</li>
                <li>stretch - 项目大小没有指定时，拉伸占据整个网格容器</li>
                <li>space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍</li>
                <li>space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔</li>
                <li>space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔</li>
            </ul>
        </li>
    </ul>

    <h3>项目属性</h3>

    <ul>
        <li>
            <strong>grid-column-start</strong> 属性：指定项目左边框所在的垂直网格线定位在哪根网格线
        </li>
        <li>
            <strong>grid-column-end</strong> 属性：指定项目右边框所在的垂直网格线定位在哪根网格线
        </li>
        <li>
            <strong>grid-row-start</strong> 属性：指定项目上边框所在的水平网格线定位在哪根网格线
        </li>
        <li>
            <strong>grid-row-end</strong> 属性：指定项目下边框所在的水平网格线定位在哪根网格线
        </li>
        <li>
            <strong>justify-self</strong> 属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目
        </li>
        <li>
            <strong>align-self</strong> 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
        </li>
    </ul>

    <h2>Grid属性展示效果示例</h2>
    <h3>容器: grid-template-columns grid-template-rows 使用绝对单位</h3>
    <div class="grid_box_container demo1">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 100px 100px 100px; <br />
            grid-template-rows: 100px 100px 100px; <br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>


    <br />
    <h3>容器: grid-template-columns grid-template-rows 使用百分比</h3>
    <div class="grid_box_container demo2">
        <span>
            # parent <br />
            display: grid; <br />
            width: 300px;<br />
            height: 300px;<br />
            grid-template-columns: 33.33% 33.33% 33.33%;<br />
            grid-template-rows: 33.33% 33.33% 33.33%;<br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>


    <br />
    <h3>容器: grid-row-gap grid-column-gap 使用绝对单位</h3>
    <div class="grid_box_container demo3">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px;<br />
            grid-template-rows: 50px 50px 50px;<br />
            grid-row-gap: 20px;<br />
            grid-column-gap: 20px;<br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>


    <br />
    <h3>容器: justify-items: start;</h3>
    <div class="grid_box_container demo4">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            justify-items: start; <br />
            align-items: stretch; <br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>



    <br />
    <h3>容器: justify-items: end;</h3>
    <div class="grid_box_container demo5">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            justify-items: end; <br />
            align-items: stretch;
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>



    <br />
    <h3>容器: justify-items: center;</h3>
    <div class="grid_box_container demo6">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            justify-items: center; <br />
            align-items: stretch;
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>


    <br />
    <h3>容器: align-items: start;</h3>
    <div class="grid_box_container demo7">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            align-items: start; <br />
            justify-items: stretch;
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>

    <br />
    <h3>容器: align-items: end;</h3>
    <div class="grid_box_container demo8">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            align-items: end;<br />
            justify-items: stretch;
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>


    <br />
    <h3>容器: align-items: center;</h3>
    <div class="grid_box_container demo9">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            align-items: center;<br />
            justify-items: stretch;
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>




    <br />
    <h3>容器: justify-content: center;</h3>
    <div class="grid_box_container demo10">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            justify-content: center;<br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>


    <br />
    <h3>容器: justify-content: space-around;</h3>
    <div class="grid_box_container demo11">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            justify-content: space-around;<br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>


    <br />
    <h3>容器: justify-content: space-between;</h3>
    <div class="grid_box_container demo12">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            justify-content: space-between;<br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>

    <br />
    <h3>容器: justify-content: space-evenly;</h3>
    <div class="grid_box_container demo13">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            justify-content: space-evenly;<br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>



    <br />
    <h3>容器: align-content: center;</h3>
    <div class="grid_box_container demo14">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            align-content: center;<br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>



    <br />
    <h3>容器: align-content: space-around;</h3>
    <div class="grid_box_container demo15">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            align-content: space-around;<br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>


    <br />
    <h3>容器: align-content: space-between;</h3>
    <div class="grid_box_container demo16">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            align-content: space-between;<br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>

    <br />
    <h3>容器: align-content: space-evenly;</h3>
    <div class="grid_box_container demo17">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            align-content: space-evenly;<br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>



    <br />
    <h3>容器: grid-column-start grid-column-end grid-row-start grid-row-end</h3>
    <div class="grid_box_container demo18">
        <span>
            # parent <br />
            display: grid; <br />
            grid-template-columns: 50px 50px 50px; <br />
            grid-template-rows: 50px 50px 50px; <br />
            justify-content: center; <br />
            align-content: center; <br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">  
                grid-column-start: 1;<br />
                grid-column-end: 4;<br />
                grid-row-start: 2;<br />
                grid-row-end: 4;<br />
            </div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>


    <br />
    <h3>容器: justify-self align-self</h3>
    <div class="grid_box_container demo19">
        <span>
            # parent <br />
            display: grid; <br />
            justify-content: center; <br />
            align-content: center; <br />
        </span>
        <div class="grid_parent_box">
            <div class="item item-1">  
                1
            </div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
            <div class="item item-9">9</div>
        </div>
    </div>

</body>

</html>